import React from "react";
import { Provider } from "react-redux";
import { store } from "./state/store";
import { useDispatch } from "react-redux";
import { State } from "./state/type";
import { changeNameAction, incrementAction, decrementAction } from "./state/action";
import { useSelector } from "./useSelector";

const Counter = React.memo(() => {
  const dispatch = useDispatch();
  const count = useSelector((state: State) => state.count);

  return (
    <div>
      <h1>Demo</h1>
      <p>{count}</p>
      <button onClick={() => dispatch(incrementAction())}>increment</button>
      <button onClick={() => dispatch(decrementAction())}>decrement</button>
    </div>
  );
});

const Name = React.memo(() => {
  const dispatch = useDispatch();
  const name = useSelector((state: State) => state.name);

  return (
    <div>
      <h1>Name</h1>
      <p>{name}</p>
      <button onClick={() => dispatch(changeNameAction(name + "1"))}>changeName</button>
    </div>
  );
});

export const DemoApp = React.memo(() => {
  return (
    <div>
      <Provider store={store}>
        <Counter />
        <Name />
      </Provider>
    </div>
  );
});